<script setup>
import OImage from "../setting/Images.vue";
import Color from "../setting/Color.vue";
import AlphaColor from "../setting/AlphaColor.vue";
import Slider from "../setting/Slider.vue";
import { newRandomUid } from "@/utils";

const props = defineProps({
  config: {
    type: Object,
    required: true,
  },
  name: {
    type: String,
    default: "",
  },
  uid: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["update:config", "change"]),
  receivePopupList = inject("receivePopupList");

const activeName = ref(0),
  form = ref({
    $position: { left: 0, top: 0 },
    $size: { width: "100%", height: "100vh" },
    $removeable: true,
    $show: false,
    $positionType: "absolute",
    $mode: "popup",
    bg: "./imagesStatic/activity/answer_bg.jpg",
    bgColor: "#4A7EFA",
    zonePosition: { left: 10, top: 300 },
    zoneSize: { width: 357, height: 366 },
    zoneBg: "",
    zoneBgColor: "#ffffff",
    textPosition: { left: 10, top: 10 },
    textSize: { width: 337, height: 346 },
    color: "#424A6A",
    optionColor: "#424A6A",
    optionSelectColor: "#388FFB",
    submitBtn: "./imagesStatic/activity/answer_submit.png",
    submitSize: { width: 211, height: 46 },
    submitPosition: { left: 86, top: 590 },
    optionBgColor: "#E9F7FE",
    optionSelectBgColor: "#E9F7FE",
    optionRightBgColor: "#E9F7FE",
    optionRightColor: "#388FFB",
    optionRightIcon: "./imagesStatic/activity/answer_right.png",
    optionWrongBgColor: "#E9F7FE",
    optionWrongColor: "#FC2E16",
    optionWrongIcon: "./imagesStatic/activity/answer_wrong.png",
    countdownBg: "",
    countdownBgSize: { width: 100, height: 40 },
    countdownColor: "#388FFB",
    countdownFontSize: 14,
    countdownPosition: { top: 303, left: 142 },
    countdownType: "ss",
  });

const formRef = ref();

const typeList = [
  {
    key: "ss",
    label: "10S",
  },
  { key: "mm:ss", label: "00:10" },
];

const detail = computed({
  get: () => {
    return Object.assign({}, form.value, props.config);
  },
  set: (val) => {
    emits("update:config", val);
    emits("change", val);
  },
});

const initConfig = () => {
  if (!detail.value.$pageFlag) {
    detail.value.$pageFlag = `Answer-${newRandomUid()}`;
    // 绑定挑战成功弹窗、未挑战成功弹窗
    detail.value.successPopupUid = newRandomUid();
    emits("change", detail.value, {
      uid: detail.value.successPopupUid,
      type: "FeedbackPopup",
      name: "挑战成功弹窗",
      pageConfig: {
        type: "success",
        scene: "answer",
      },
    });
    detail.value.failPopupUid = newRandomUid();
    emits("change", detail.value, {
      uid: detail.value.failPopupUid,
      type: "FeedbackPopup",
      name: "挑战失败弹窗",
      pageConfig: {
        type: "fail",
        scene: "answer",
      },
    });
    detail.value.answerBtnUid = newRandomUid();
    emits(
      "change",
      detail.value,
      {
        uid: detail.value.answerBtnUid,
        type: "BButton",
        name: "开始答题按钮",
        pageConfig: {
          $removeable: false,
          $pageFlag: detail.value.$pageFlag,
          linkType: "system",
          type: "answer",
          img: "https://static.lianhaikeji.com/images/20221114/76c35adfda1a4d9eb335d328c63e1f92.png",
          $size: { width: 203, height: 46 },
          answerUid: props.uid,
        },
      },
      "before"
    );
    onChange();
  }
};

const onChange = (val, type) => {
  detail.value = detail.value;
};

// 表单校验
const check = () => {
  return new Promise((resolve, reject) => {
    formRef.value.validate(async (valid, invalidFields) => {
      if (valid) {
        resolve();
      } else {
        reject(
          `${props.name}校验未通过，${
            invalidFields[Object.keys(invalidFields)[0]][0].message
          }`
        );
      }
    });
  });
};

// 组件移除(同时移除抽奖机会和奖池)
const remove = (pagelist) => {
  let btnIndex = pagelist.findIndex(
    (item) => item.uid === detail.value.answerBtnUid
  );
  pagelist.splice(btnIndex, 1);
  let failPopuIndex = pagelist.findIndex(
    (item) => item.uid === detail.value.failPopupUid
  );
  pagelist.splice(failPopuIndex, 1);
  let successPopupIndex = pagelist.findIndex(
    (item) => item.uid === detail.value.successPopupUid
  );
  pagelist.splice(successPopupIndex, 1);
};

onMounted(() => {
  nextTick(() => {
    initConfig();
    onChange();
  });
});

defineExpose({ remove, check });
</script>
<template>
  <el-form
    ref="formRef"
    :model="detail"
    label-width="auto"
    :disabled="disabled"
  >
    <el-form-item label="立即领奖弹窗:" prop="receivePopupUid">
      <el-select
        v-model="detail.receivePopupUid"
        multiple
        placeholder="请选择"
        style="width: 200px"
        @change="onChange"
      >
        <el-option
          v-for="(item, key) in receivePopupList"
          :label="item.name"
          :value="item.uid"
        />
      </el-select>
    </el-form-item>
    <div class="tab-container">
      <div
        class="tab-item"
        :class="{ active: activeName == 0 }"
        @click="activeName = 0"
      >
        <div class="img">
          <img v-if="detail.bg" :src="detail.bg" alt="" />
          <div
            v-else-if="detail.bgColor"
            class="color-block"
            :style="{ backgroundColor: detail.bgColor }"
          ></div>
        </div>
        <div class="name">答题区域</div>
      </div>
      <div
        class="tab-item"
        :class="{ active: activeName == 1 }"
        @click="activeName = 1"
      >
        <div class="img">
          <div
            class="option-item"
            :style="{
              color: detail.optionRightColor,
              backgroundColor: detail.optionRightBgColor,
            }"
          >
            正确答案
            <img :src="detail.optionRightIcon" alt="" />
          </div>
          <div
            class="option-item"
            :style="{
              color: detail.optionWrongColor,
              backgroundColor: detail.optionWrongBgColor,
            }"
          >
            错误答案
            <img :src="detail.optionWrongIcon" alt="" />
          </div>
        </div>
        <div class="name">答案提示</div>
      </div>
      <div
        class="tab-item"
        :class="{ active: activeName == 2 }"
        @click="activeName = 2"
      >
        <div class="img"></div>
        <div class="name">倒计时</div>
      </div>
    </div>

    <div class="tab-panel" v-show="activeName == 0">
      <AlphaColor
        v-model="detail.bgColor"
        name="页面背景色"
        @change="onChange"
      />
      <AlphaColor
        v-model="detail.zoneBgColor"
        name="答题区域背景色"
        @change="onChange"
      />
      <AlphaColor
        v-model="detail.optionBgColor"
        name="选项背景色"
        @change="onChange"
      />
      <Color v-model="detail.color" name="题干文字颜色" @change="onChange" />
      <Color
        v-model="detail.optionColor"
        name="选项文字颜色"
        @change="onChange"
      />
      <OImage v-model="detail.bg" name="页面背景图" @change="onChange" />
      <OImage
        v-model="detail.zoneBg"
        v-model:size="detail.zoneSize"
        name="答题区域背景图"
        @change="onChange"
      />
      <OImage
        v-model="detail.submitBtn"
        v-model:size="detail.submitSize"
        name="下一题按钮"
        @change="onChange"
      />
    </div>
    <div class="tab-panel" v-show="activeName == 1">
      <AlphaColor
        v-model="detail.optionRightBgColor"
        name="正确选项背景色"
        @change="onChange"
      />
      <Color
        v-model="detail.optionRightColor"
        name="正确选项文字颜色"
        @change="onChange"
      />
      <AlphaColor
        v-model="detail.optionWrongBgColor"
        name="错误选项背景色"
        @change="onChange"
      />
      <Color
        v-model="detail.optionWrongColor"
        name="错误选项文字颜色"
        @change="onChange"
      />
      <OImage
        v-model="detail.optionRightIcon"
        name="正确图标"
        @change="onChange"
      />
      <OImage
        v-model="detail.optionWrongIcon"
        name="错误图标"
        @change="onChange"
      />
    </div>
    <div class="tab-panel" v-show="activeName == 2">
      <div class="form-item">
        <div class="name">时间格式</div>
        <div class="setting">
          <el-radio-group v-model="detail.countdownType" @change="onChange">
            <el-radio v-for="item in typeList" :label="item.key">{{
              item.label
            }}</el-radio>
          </el-radio-group>
        </div>
      </div>
      <Color
        v-model="detail.countdownColor"
        name="文字颜色"
        @change="onChange"
      />
      <Slider
        v-model="detail.countdownFontSize"
        name="文字大小"
        :min="10"
        :max="30"
        @change="onChange"
      />
      <OImage
        v-model="detail.countdownBg"
        v-model:size="detail.countdownBgSize"
        name="背景图"
        @change="onChange"
      />
    </div>
  </el-form>
</template>
<style lang="scss" scoped>
.form-item {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  .name {
    font-size: 14px;
  }
  .setting {
    margin-left: 20px;
  }
}
.img {
  width: 124px;
  height: 124px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  border-radius: 10px;
  border: 1px solid #999;
  overflow: hidden;
  background-position: 0 0, 15px 15px;
  background-size: 10px 10px;
  background-image: linear-gradient(
      45deg,
      #ccc 25%,
      transparent 0,
      transparent 75%,
      #ccc 0
    ),
    linear-gradient(45deg, #ccc 25%, transparent 0, transparent 75%, #ccc 0);
}
.tab-container {
  display: flex;
  flex-wrap: wrap;
  .tab-item {
    margin-right: 10px;
    cursor: pointer;
    user-select: none;
    img {
      display: block;
      width: 80%;
      height: 80%;
      object-fit: contain;
      margin: 0 auto;
    }
    .color-block {
      width: 80%;
      height: 30%;
    }
    .name {
      text-align: center;
      margin-top: 5px;
    }
    .option-item {
      width: 80%;
      height: 30px;
      border-radius: 15px;
      text-align: center;
      line-height: 30px;
      position: relative;
      font-size: 12px;
      img {
        display: block;
        width: 15px;
        height: 15px;
        position: absolute;
        right: 10px;
        top: 8px;
      }
    }
    &.active {
      .img {
        border-color: var(--el-color-primary);
      }
      .name {
        color: var(--el-color-primary);
      }
    }
  }
}
.tab-panel {
  margin-top: 10px;
}
</style>
